<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<script>
    function tiaozhuan(){
        window.location.href="AddKc.html";
    }
</script>

<table id="demo" lay-filter="test"></table>
<div style="display:none;" id="userToolBar">
    <button type="button" class="layui-btn layui-btn-sm" onclick="tiaozhuan()">增加</button>
    <form action="" class="layui-btn layui-btn-sm" style="background-color: white;">

        <input id="nr" class=" layui-btn-sm" type="text" name="title" style="width: 250px" lay-verify="title"
               autocomplete="off" placeholder="请输入查找内容">
        <button type="button" class="layui-btn layui-btn-sm" onclick="myfuntion()">查找</button>

    </form>

</div>
<div id="userBar" style="display:none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>


<script src="../layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table,
            $ = layui.jquery;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: '/admin/kc' //数据接口
            , toolbar: "#userToolBar"
            , page: false //开启分页
            , cols: [[ //表头
                { field: 'kid', title: '课程号', width:80, fixed: 'left'}
                ,{field: 'kname', title: '课程名', width:200,edit: 'text'}
                ,{field: 'ktime', title: '课时', width:80,edit: 'text' }
                ,{field: 'kgrade', title: '学分', width:90,edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#userBar', width: 150,edit: 'text'}
            ]]

        });
        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    $.ajax({
                        type: "POST",
                        url: "/admin/dk",
                        data: JSON.stringify({
                            kid: data.kid
                        }),
                        contentType: "application/json;charset=utf-8",
                        success: function (userList) {
                            console.log(userList);

                        }, error: function (e) {
                            console.log(e.status);
                        }
                    })
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                console.log(data);
                $.ajax({
                    type: "POST",
                    url: "/admin/xgkc",
                    data: JSON.stringify(data),
                    contentType: "application/json;charset=utf-8",
                    success: function (userList) {
                        console.log(userList);

                    }, error: function (e) {
                        console.log(e.status);
                    }
                })


                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });

    function myfuntion() {
        var table = layui.table;
        var s = document.getElementById("nr").value;
        var tableIns = table.render({
            elem: '#demo'
            , height: 312
            , url: '/admin/cclass' //数据接口
            , where: {
                name: s

            }
            , toolbar: "#userToolBar"

            , cols: [[ //表头
                { field: 'kid', title: '课程号', width:80, fixed: 'left'}
                ,{field: 'kname', title: '课程名', width:200}
                ,{field: 'ktime', title: '课时', width:80, }
                ,{field: 'kgrade', title: '学分', width:90}
                , {fixed: 'right', title: '操作', toolbar: '#userBar', width: 150}
            ]]



        });

    }

</script>
</body>
</html>